<template>
  <div id="app">

    <el-container>
      <!-- 此container用来定义上层空间 -->

      <!-- el定义的左侧空间，又称为侧边栏 -->
      <!-- 左侧边栏样式，设置高度为屏幕高度（也就是高度铺满）背景色为#545c64，宽度为250px -->
      <!-- overflow: hidden; 设置了边框的溢出效果为隐藏。当内容超出边框时，多余的内容将被隐藏。 -->
      <el-aside style="
          overflow: hidden;
          min-height: 100vh;
          background-color: #545c64;
          width: 250px;
        ">
        <!-- menu是一个菜单栏组件，default-active="2"：设置默认展开的菜单项的索引。
          class="el-menu-vertical-demo"：设置菜单样式为垂直布局。
          @open="handleOpen"：当菜单项展开时，触发handleOpen方法。
          @close="handleClose"：当菜单项折叠时，触发handleClose方法。
          background-color="#545c64"：设置菜单背景颜色。
          text-color="#fff"：设置菜单文本颜色。
          active-text-color="#ffd04b"：设置菜单项激活时的文本颜色。
        -->
        <el-menu :default-active="$route.path" router class="el-menu-vertical-demo" @open="handleOpen"
          @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
          :collapse="isCollapse">

          <!-- 创建一个不能创建子菜单的跳转item -->
          <el-menu-item index="/" :unique-opened=true>
            <i class="el-icon-s-home"></i><span slot="title">系统首页</span>
          </el-menu-item>

          <!-- 创建一个能够创建子菜单的submenu，设置索引为2 -->
          <el-submenu index="2">
            <!-- template，插入一个定位模样的icon，定义二级菜单的名称 -->
            <template slot="title">
              <i class="el-icon-s-tools"></i><span>系统管理</span>
            </template>
            <!-- 创建一个菜单项，索引为/admin，文本为“选项1”。 -->
            <el-menu-item index="/admin">管理员信息</el-menu-item>
            <!-- 创建一个菜单项，索引为/user，文本为“选项2”。 -->
            <el-menu-item index="/user">用户信息</el-menu-item>
          </el-submenu>

          <!-- 创建一个能够创建子菜单的submenu，设置索引为3 -->
          <el-submenu index="3">
            <!-- template定义一级菜单的名称 -->
            <template slot="title">
              <!-- 插入一个定位模样的icon -->
              <i class="el-icon-location"></i><span>信息管理</span>
            </template>
            <!-- 创建一个菜单项，索引为/student，文本为学生信息。 -->
            <el-menu-item index="/student">学生信息</el-menu-item>
            <!-- 创建一个菜单项，索引为/notice，文本为系统公告。 -->
            <el-menu-item index="/notice">系统公告</el-menu-item>
            <!-- 创建一个菜单项，索引为/config，文本为配置参数。 -->
            <el-menu-item index="/config">配置参数</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <!-- 插入一个定位模样的icon -->
              <i class="el-icon-location"></i><span>Test</span>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 此container用来定义下层空间 -->
      <el-container>

        <!-- el定义的头部空间，在css里面设置标签的背景颜色 -->
        <el-header style="background-color: #4c535a; display: flex; align-items: center;">
          <!-- @表示src目录，设置了图片的宽度、相对定位和上面的距离。-->
          <!-- <img src="@/assets/rain.png" alt="" style="width: 40px; position: relative; top: 10px" /> -->
          <!-- span标签用于包裹文本，设置了字体，左侧的间距，字体的颜色 -->
          <!-- <span style="font-size: 20px; margin-left: 15px; color: rgb(245, 243, 243)">这里是标题</span> -->
          <el-page-header>
            <template #icon>
              <i style="color: #fff;"></i>
            </template>
            <template #title>
              <span style="color:#fff; font-size: 15px;">主页</span>
            </template>
            <template #content>
              <span style="color: #fff; font-size: 16px;">详情页面</span>
            </template>
          </el-page-header>
        </el-header>

        <!-- el定义的主体空间 -->
        <el-main>
          <!-- 定义一个路由占位符，此占位符与index中的索引对应的路径保持一致 -->
          <router-view />
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>
<style>
.el-menu {
  border-right: none !important;
}

/* 设置面包屑字体颜色为白色 */
.my-breadcrumb .el-breadcrumb__inner {
  color: #fff;
}

/* 设置面包屑分隔符颜色为白色 */
.my-breadcrumb .el-breadcrumb__separator {
  color: #ffffff;
}

/* 设置头部的颜色 */
.el-header {
  color: #fff !important;
}
</style>

<script>
export default {
  data() {
    return {
      //默认左右展开
      isCollapse: false
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>